Google Charts API-এ Gauge Chart এবং Timeline Chart দুটি বিশেষ ধরনের চার্ট রয়েছে যা ডেটা ভিজুয়ালাইজেশনের ক্ষেত্রে বিশেষভাবে ব্যবহৃত হয়। Gauge Chart সাধারণত পরিমাপ বা মাপের জন্য ব্যবহৃত হয়, যেমন কোনো প্রোগ্রামের সম্পাদনার পরিমাণ বা পরিমাপ, এবং Timeline Chart সময়ের সাথে সম্পর্কিত ডেটা ভিজুয়ালাইজ করতে ব্যবহৃত হয়, যেমন একটি প্রজেক্টের বিভিন্ন ফেজের সময়সূচী।

এখানে আমরা Angular ব্যবহার করে Gauge Chart এবং Timeline Chart তৈরি করার পদ্ধতি এবং কাস্টমাইজেশন দেখব।

1. Gauge Chart তৈরি এবং কাস্টমাইজেশন

Gauge Chart ব্যবহার করে আপনি কোনো মান বা পরিসরের মধ্যে অবস্থান চিত্রিত করতে পারেন। এটি সাধারণত progress, performance, বা percentage এর জন্য ব্যবহৃত হয়।

Gauge Chart উদাহরণ

1. Angular প্রজেক্টে Gauge Chart তৈরি করা

প্রথমে, আপনার Angular অ্যাপে GoogleChartsModule ইমপোর্ট করতে হবে (যেমন পূর্বে উল্লেখ করা হয়েছে)।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Gauge Chart Example';

  chartType = 'Gauge';  // Gauge Chart
  chartData = [
    ['Label', 'Value'],
    ['Memory', 80],   // This can be a dynamic value
    ['CPU', 55]
  ]; // Chart Data

  chartOptions = {
    width: 400,
    height: 300,
    redFrom: 90,  // Red color zone starting value
    redTo: 100,  // Red color zone ending value
    yellowFrom: 75,  // Yellow color zone starting value
    yellowTo: 90,  // Yellow color zone ending value
    minorTicks: 5 // Number of minor ticks
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Gauge Chart কাস্টমাইজেশন

• redFrom এবং redTo: এটি নির্দেশ করে যে কোন পরিসরে রেড (বিপদ) অঞ্চলটি থাকবে।
• yellowFrom এবং yellowTo: এটি হল একটি সাবধানতার এলাকা (yellow zone), যা সাধারণত পরিমাপের নির্দিষ্ট সীমার কাছাকাছি থাকলে প্রদর্শিত হয়।
• minorTicks: এটি চার্টে ছোট টিক্সের সংখ্যা নির্ধারণ করে।

2. Timeline Chart তৈরি এবং কাস্টমাইজেশন

Timeline Chart সাধারণত সময়ের সাথে সম্পর্কিত ডেটা ভিজুয়ালাইজ করতে ব্যবহৃত হয়। এটি প্রজেক্ট বা ইভেন্টের বিভিন্ন ধাপ, সময়সীমা, এবং অন্যান্য সময়-ভিত্তিক তথ্য প্রদর্শনের জন্য উপযুক্ত।

Timeline Chart উদাহরণ

1. Angular প্রজেক্টে Timeline Chart তৈরি করা

প্রথমে, GoogleChartsModule ইমপোর্ট করতে হবে (যেমন পূর্বে বলা হয়েছে)।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Timeline Chart Example';

  chartType = 'Timeline'; // Timeline Chart
  chartData = [
    ['ID', 'Start', 'End', 'Task'],
    ['1', new Date(2023, 0, 1), new Date(2023, 0, 10), 'Project Start'],
    ['2', new Date(2023, 0, 10), new Date(2023, 0, 15), 'Phase 1'],
    ['3', new Date(2023, 0, 15), new Date(2023, 0, 20), 'Phase 2'],
    ['4', new Date(2023, 0, 20), new Date(2023, 0, 30), 'Project End']
  ]; // Chart Data

  chartOptions = {
    timeline: { showRowLabels: true },  // Show Row Labels in Timeline Chart
    tooltip: { isHtml: true }  // Enable HTML tooltips
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Timeline Chart কাস্টমাইজেশন

• showRowLabels: এটি টাইমলাইন চিত্রে প্রতিটি রো (কর্মসূচী) এর লেবেল দেখানোর জন্য ব্যবহৃত হয়।
• tooltip.isHtml: টুলটিপে HTML কন্টেন্ট ব্যবহারের অনুমতি দেয়।

কাস্টমাইজেশন অপশনস

1. Gauge Chart কাস্টমাইজেশন অপশনস:

• redFrom, redTo: রেড এরিয়া।
• yellowFrom, yellowTo: ইয়েলো এরিয়া।
• minorTicks: ছোট টিকসের সংখ্যা।
• max: সর্বাধিক মান।

2. Timeline Chart কাস্টমাইজেশন অপশনস:

• timeline.showRowLabels: রো লেবেলগুলো প্রদর্শন করা।
• timeline.showBarLabels: বার লেবেলগুলো প্রদর্শন করা।
• timeline.groupByRowLabel: একাধিক কাজের জন্য গ্রুপিং।

Chart Interaction and User Interaction

Gauge Chart এবং Timeline Chart ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ উপস্থাপনা প্রদান করতে পারে। উদাহরণস্বরূপ:

Gauge Chart Interaction

Gauge Chart-এ ইউজার যদি কোনো মান নির্বাচন করেন, তাহলে আপনি click event ব্যবহার করে সাড়া দিতে পারেন:

google.visualization.events.addListener(chart, 'select', () => {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    var item = selection[0];
    alert('You selected: ' + this.chartData[item.row][0]);
  }
});

Timeline Chart Interaction

Timeline Chart-এ ইউজার যখন কোনো সেগমেন্টে ক্লিক করবে, তখন আপনি সিলেক্ট করা সেগমেন্টের ডেটা ব্যবহার করে অতিরিক্ত ইনফরমেশন প্রদর্শন করতে পারেন।

google.visualization.events.addListener(chart, 'select', () => {
  var selection = chart.getSelection();
  var row = selection[0].row;
  alert('Selected Task: ' + this.chartData[row][3]);
});

সারাংশ

Gauge Chart এবং Timeline Chart দুটি অত্যন্ত কার্যকরী চার্ট যা আপনাকে ডেটার ভিজুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করতে সহায়তা করে। Gauge Chart সাধারণত progress বা performance পরিমাপের জন্য ব্যবহৃত হয় এবং Timeline Chart সময়ের সাথে সম্পর্কিত ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এই চার্টগুলো Angular অ্যাপে ব্যবহার করা খুবই সহজ এবং এগুলোর কাস্টমাইজেশন অপশন দিয়ে আপনি অনেক ধরনের ভিজুয়াল উপস্থাপনা তৈরি করতে পারেন।